<%@ page import="java.util.List" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息管理系统-用户管理</title>
    <style>

    </style>
    <link rel="stylesheet" href="/static/css/list.css">
    <%--<link rel="stylesheet" href="../css/common.css">--%>
    <script>
        var ctx = "<%=request.getContextPath()%>";
    </script>
</head>
<body>

    <p><a href="<%=request.getContextPath()%>/" target="_top">首页</a> >>学员管理</p>
    <p>
        <a href="javascript:" ><button type="button" >新增学员</button></a>
        <button type="button"  id="delBatch" >批量删除</button>
        <a href=""><button type="button">刷新</button>  </a>
    </p>
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th width="5%"><a href="javascript:void(0)" id ="choose" >全选/反选</a></th>
                <th width="5%">编号</th>
                <th width="14%">姓名</th>
                <th width="14%">性别</th>
                <th width="14%">生日</th>
                <th width="14%">班级</th>
                <th width="14%">操作</th>
            </tr>
        </thead>
        <tbody>

        <c:forEach items="${pageable.rows}" var="stu" >
            <tr>
                <td align="center">
                    <input type="checkbox" name="check">
                    <input type="hidden" name="id" value="${stu.sId}">
                </td>
                <td>${stu.sNo}</td>
                <td>${stu.sName}</td>
                <td>${stu.sSex}</td>
                <td>${stu.birthday}</td>
                <td>${stu.classz}</td>
                <td>
                    <a href="javascript:"><button type="button">编辑</button></a>
                    <a href="javascript:vod(0)"><button type="button" class="btn-del" name="delete" onclick="delRow(this)">删除</button></a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="page">

        <select name="size"  class="fr">
            <option class="opt" value="15" <c:if test="${pageable.size eq 15}">selected</c:if>>15条/页</option>
            <option class="opt" value="20" <c:if test="${pageable.size eq 20}">selected</c:if>>20条/页</option>
            <option class="opt" value="30" <c:if test="${pageable.size eq 30}">selected</c:if>>30条/页</option>
        </select>

        <a href="javascript:" data-type="1" class="page-btn page-skip next fr <c:if test="${pageable.last}">disable</c:if>">下一页</a>

        <div class="fr pageNum">

            <c:forEach begin="1" end="${pageable.pageCount}" varStatus="i">

                <a href="javascript:" class="page-btn fl <c:if test="${i.index eq pageable.page}">active</c:if>">${i.index}</a>

            </c:forEach>

        </div>


        <a href="javascript:" data-type="2" class="page-btn page-skip prev fr <c:if test="${pageable.first}">disable</c:if>" >上一页</a>

        <span class="fr">共 ${pageable.total} 条</span>





    </div>




    <script src="/static/js/plugins/jquery.js"></script>
    <script src="/static/js/plugins/layer/layer.js"></script>
    <script>
    $(function () {
        //翻页
        $(".pageNum a").on('click',pageNum)
        $(".page-skip").on('click',pageSkip)
        $("select[name=size]").on('change',pageSize)

    })

    function pageSize(){
        var size = $(this).val();
        /*var page = $(".pageNum a.active").text();*/
        location.href = "/student/list?page="+1+"&size="+size
    }

        function pageNum(){
            var page = $(this).text();
            var size = $(".page select[name=size]").val()
            location.href = ctx + "/student/list?page="+page+"&size="+size

        }

    function pageSkip(){
        var classStr = $(this).attr("class");
        var index = classStr.indexOf("disable");
        if(index > 0){
            return;
        }
        var size = $(".page select[name=size]").val();
        var page = $(".pageNum a.active").text();
        var type = $(this).data("type");
        if(type == 1) {
            page = Number(page) + 1
        }else {
            page = Number(page) - 1
        }
        location.href = ctx + "/student/list?page="+page+"&size="+size
    }
       /* $(".fl").on('click',function () {
            /!*alert("vwsqegw")*!/
            var page = $(this).text();
            var size = $(".page select[name=size]").val()
            location.href = ctx + "/student?m=sList&page="+page+"&size="+size

        })
*/
        //批量删除

        $("#delBatch").on('click',function(){
            var $elements = $("input:checked");
            var len = $elements.length;
            console.log(len);
            if(len<1){
                layer.msg('请先选择要删除的记录！');
                return flase;
            }else{
                layer.confirm('确定要删除选中的记录吗?',function(index){
                    layer.close(index);
                    $elements.each(function(){
                        $(this).closest('tr').remove();
                    })
                    layer.msg('删除成功!');
                })
            }

        })

        //全选、反选

        $("#choose").on('click',function(){
            var $elements = $("input[name = check]");
            $elements.each(function () {
                var isCheck = $(this).prop("checked");
                if(isCheck){
                    $(this).prop("checked","")
                }else{
                    $(this).prop("checked","checked")
                }
            })
        })





        //删除一行
        function delRow(btn){
            layer.confirm('是否确定删除?',function () {
                var id = $(btn).closest('tr').find("input[name=id]").val();
                location.href = "/user?m=del&id="+id;
            })
        }



    </script>
</body>
</html>